<template>
    <div class="weatherBox">
        <div class="weatherLeft">
            <div class="title">日历</div>
            <div class="calendar">
                <div class="top">
                    <el-button type="text" @click="preMonth()"><i class="el-icon-arrow-left"></i></el-button>
                    <div class="year-month">{{ currentYear }}年{{ currentMonth }}月</div>
                    <el-button type="text" @click="nextMonth()"><i class="el-icon-arrow-right"></i></el-button>
                </div>
                <div class="main">
                    <div class="weekTop">
                        <div v-for="item in weekDaysFromOne" :key="item">{{item}}</div>
                    </div>
                    <div class="weekBody">
                        <ul>
                            <li v-for="(dayobject,i) in days" :key="i" @click="getClickDay(dayobject)" :class="{'other-month': dayobject.cMonth!= currentMonth, 'choise': choiseDayMsg.date == dayobject.date,'active': curDayMsg.date == dayobject.date}">
                                <span class="cday">{{dayobject.cDay}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fold">
                <div class="name">我的日历<i class="el-icon-arrow-down"></i></div>
                <ul>
                    <li :class="checked?'active':''"><el-checkbox v-model="checked">我的日程</el-checkbox></li>
                </ul>
            </div>
        </div>
        <div class="weatherRight">
            <div class="top">
                <div class="change">
                    <span class="today" @click="initData()">今天</span>
                    <el-button type="text" @click="preMonth()"><i class="el-icon-arrow-left"></i></el-button>
                    <el-button type="text" @click="nextMonth()"><i class="el-icon-arrow-right"></i></el-button>
                    <div class="year-month">{{ currentYear }}年{{ currentMonth }}月</div>
                </div>
                <el-button type="primary" @click="submitAdd">新建日程<i class="el-icon-circle-plus-outline"></i></el-button>
            </div>
            <div class="main">
                <div class="weekTop">
                    <div v-for="item in (fromsun ? weekDaysFromSun : weekDays)" :key="item">{{item}}</div>
                </div>
                <div class="weekBody" ref="weekBodyStop">
                    <ul class="tBody">
                        <li class="tList" v-for="(dayobject,i) in days" :key="i" @click="getClickDay(dayobject)" :class="{'other-month': dayobject.cMonth!= currentMonth,
                            'choise': choiseDayMsg.date == dayobject.date,'active': curDayMsg.date == dayobject.date}">
                            <div class="content">
                                <el-popover trigger="hover" v-if="choiseDayMsg.date== dayobject.date&&dayobject.list&&dayobject.list.weatherLogDTOList">
                                    <div class="pop">
                                        <div class="name">
                                            <span>{{dayobject.cDay}}</span>
                                            <span v-if="showlunar">{{dayobject.festival ? dayobject.festival: (dayobject.IDayCn == '初一'? dayobject.IMonthCn:dayobject.IDayCn)}}</span>
                                        </div>
                                        <div class="list" v-for="(list,index) in dayobject.list.weatherLogDTOList" :key="index">
                                            <div class="left">
                                                <span class="blue">{{momentTime(list.time).format('HH:mm')}}<p>{{todyOn[index]}}</p></span>
                                                <span class="centigrade"><img src="../../assets/svg/centigrade.svg"/>{{list.temperature}}℃</span>
                                                <span>{{list.windSpeed}}m/s</span>
                                            </div>
                                            <div class="popImg">{{list.weather}}<img :src="require('../../assets/images/common/'+list.weatherPic+'.png')"/></div>
                                        </div>
                                    </div>
                                    <div class="day" slot="reference">
                                        <span class="time">{{dayobject.cDay}}</span>
                                        <span class="lunar" v-if="showlunar">{{dayobject.festival ? dayobject.festival: (dayobject.IDayCn == '初一'? dayobject.IMonthCn:dayobject.IDayCn)}}</span>
                                        <span class="forDay" v-if="dayobject.forDay" :class="dayobject.forDay==='1'?'blue':'red'">{{dayobject.forDay==='1'?'休':'班'}}</span>
                                    </div>
                                </el-popover>
                                <div class="day" v-else>
                                    <span class="time">{{dayobject.cDay}}</span>
                                    <span class="lunar" v-if="showlunar">{{dayobject.festival ? dayobject.festival: (dayobject.IDayCn == '初一'? dayobject.IMonthCn:dayobject.IDayCn)}}</span>
                                    <span class="forDay" v-if="dayobject.forDay" :class="dayobject.forDay==='1'?'blue':'red'">{{dayobject.forDay==='1'?'休':'班'}}</span>
                                </div>
                                <div class="schedule" v-if="dayobject.list&&dayobject.list.scheduleList&&dayobject.list.scheduleList.length>0&&checked">
                                    <ul>
                                        <li v-for="item in dayobject.list.scheduleList.slice(0,2)" :key="item.id" @click="changeDay(item)"><span>{{momentTime(item.selectTime).format('HH:mm')}}</span>{{item.title}}</li>
                                    </ul>
                                    <div class="more" v-if="dayobject.list.scheduleList.length>2" @click="moreDay(dayobject.list.scheduleList,dayobject.list.date)">还有{{dayobject.list.scheduleList.length-2}}项...</div>
                                </div>
                                <div class="weather" v-if="dayobject.list&&dayobject.list.scheduleList&&dayobject.list.scheduleList.length===0||dayobject.list&&dayobject.list.scheduleList&&dayobject.list.scheduleList.length>0&&!checked||dayobject.list&&dayobject.list.scheduleList&&dayobject.list.scheduleList.length===0&&!checked||dayobject.list&&dayobject.list.appWeatherDTO&&momentTime(momentTime(dayobject.list.appWeatherDTO.time,'YYYY/MM/DD')).diff(momentTime(momentTime(choiseDayMsg.date,'YYYY/MM/DD')), 'days') < 0">
                                   <div class="time" v-if="dayobject.list&&dayobject.list.appWeatherDTO">
                                        <span>
                                            <img :src="require('../../assets/images/common/'+dayobject.list.appWeatherDTO.weatherPic+'.png')"/>
                                            <p>{{dayobject.list.appWeatherDTO.weather}}</p>
                                        </span>
                                    </div>
                                     <div class="info" v-if="dayobject.list&&dayobject.list.appWeatherDTO">
                                        <div class="temperature">
                                            <span v-if="choiseDayMsg.date == dayobject.date" class="on">{{momentTime(dayobject.list.appWeatherDTO.time).format('HH:mm')}}</span>
                                            <span v-if="choiseDayMsg.date == dayobject.date" class="air"><img src="../../assets/svg/centigrade.svg"/>{{dayobject.list.appWeatherDTO.temperature}}℃</span>
                                            <span v-else class="air"><img src="../../assets/svg/centigrade.svg"/>{{dayobject.list.appWeatherDTO.minTemperature}}℃~{{dayobject.list.appWeatherDTO.maxTemperature}}℃</span>
                                        </div>
                                        <div class="wind">
                                            <div v-if="choiseDayMsg.date == dayobject.date">风速：{{dayobject.list.appWeatherDTO.windSpeed}}m/s</div>
                                            <div v-else>风力：{{dayobject.list.appWeatherDTO.windPower}}级</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="700px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="日程标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请输入日程、会议、通知等标题，15字内"></el-input>
                </el-form-item>
                <el-form-item label="选择时间" prop="selectTime">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.selectTime" style="width: 100%;" :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item label="日程描述" prop="describeInfo">
                    <el-input type="textarea" placeholder="请简要描述日程~" v-model="ruleForm.describeInfo" :autosize="{ minRows:7, maxRows: 9}" maxlength="200" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="dialogChange" @click="scheduleDelet" type="danger">删除日程</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="moreTitle" :visible.sync="dialogMore" width="600px">
            <ul class="moreList">
                <li v-for="item in moreList" :key="item.id" @click="changeDay(item)">
                    <span class="time">{{momentTime(item.selectTime).format('HH:mm')}}</span>
                    <span class="text">{{item.title}}</span>
                </li>
            </ul>
        </el-dialog>
    </div>
</template>
<script>
import moment from 'moment';
import {getWeatherHistoryCalendar,addSchedule,editSchedule,deleteSchedule} from '@/api/api';
import calendar from './date.js'
export default {
    data () {
        return {
            momentTime:moment,
            currentDay: 1,
            currentMonth: 1,
            currentYear: null,
            currentWeek: 1,
            days: [],
            curDayMsg: [],
            choiseDayMsg: [],
            weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            weekDaysFromSun: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            weekDaysFromOne: [ '一', '二', '三', '四', '五', '六','日'],
            showlunar:true,
            lines:6,
            fromsun:false,
            deptId:null,
            checked:true,
            dialogVisible:false,
            dialogTitle:null,
            dialogChange:false,
            pickerOptions:{ 
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            ruleForm:{
                title:null,
                selectTime:null,
                describeInfo:null,
            },
            rules: {
                title: [
                    { required: true, message: '请输入日程标题', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                selectTime: [
                    {required: true, message: '请选择日期', trigger: 'change' }
                ],
                describeInfo: [
                    { required: true, message: '请填写日程描述', trigger: 'blur' }
                ]
            },
            todyOn:['上午','中午','下午'],

            moreList:[],
            moreTitle:null,
            dialogMore:false,
        }
    },
    created() {
        this.deptId=this.$store.state.porjectObject.deptId
        this.initData()
    },
    methods: {
        // 初始化
        initData(cur) {
            let now, curMonthStartDay, curMonthStartWeek, curPageStartDay
            if (cur) {
                now = new Date(cur)
            } else {
                now = new Date()
            }
            this.currentYear = now.getFullYear()
            this.currentMonth = now.getMonth() + 1
            this.currentDay = now.getDay()
            // 获取当前月第一天
            curMonthStartDay = new Date(
                this.formatDate(now.getFullYear(), now.getMonth() + 1, 1)
            )
            // 当前月第一天是周几
            curMonthStartWeek = curMonthStartDay.getDay() // 1,2,3,4,5,6,0
            if (curMonthStartWeek == 0) {
                curMonthStartWeek = 7
            }
            // 日历当前页开始日期
            curPageStartDay =
                curMonthStartDay -
                (this.fromsun ? curMonthStartWeek : curMonthStartWeek - 1) *
                24 *
                60 *
                60 *
                1000
            // 循环获取日历当前页所有日期（7*this.lines \5/6\）
            let dayLst = []
            for (let i = 0; i < this.lines * 7; i++) {
                let year = new Date(
                    curPageStartDay + i * 24 * 60 * 60 * 1000
                ).getFullYear()
                let month =
                new Date(curPageStartDay + i * 24 * 60 * 60 * 1000).getMonth() + 1
                let day = new Date(curPageStartDay + i * 24 * 60 * 60 * 1000).getDate()
                dayLst.push(calendar.solar2lunar(year, month, day))
            }
            if (!cur) {
                this.choiseDayMsg = calendar.solar2lunar(
                    this.currentYear,
                    this.currentMonth,
                    now.getDate()
                )
                // this.choiseDayMsg = this.curDayMsg
            }
           let params = {
                deptId: this.deptId,
                time:`${this.currentYear}-${this.currentMonth}`,
            };
            getWeatherHistoryCalendar(params).then(res=>{
                if(res.code == 200){
                    this.$nextTick(()=>{
                        dayLst.forEach(item=>{
                            let time= moment(item.date).format('YYYY-MM-DD')
                            let list=res.data.filter(obj=>moment(obj.date).format('YYYY-MM-DD')===time)
                            item.list=list[0]
                        })
                        this.days=dayLst
                        this.$refs.weekBodyStop.scrollTop=0
                    })
                }
            })
        },

        // 上一月
        preMonth() {
            this.currentMonth--
            if (this.currentMonth == 0) {
                this.currentMonth = 12
                this.currentYear--
            }
            this.initData(this.formatDate(this.currentYear, this.currentMonth, 1))
        },

        // 下一月
        nextMonth() {
            this.currentMonth++
            if (this.currentMonth == 13) {
                this.currentMonth = 1
                this.currentYear++
            }
            this.initData(this.formatDate(this.currentYear, this.currentMonth, 1))
        },

        // 点击日期
        getClickDay(el) {
            this.curDayMsg = el
        },

        // 格式化 -> 2020-11-20
        formatDate(year, month, day) {
            if (month < 10) month = '0' + month
            if (day < 10) day = '0' + day
            return year + '-' + month + '-' + day
        },
        // 新建
        submitAdd(){
            this.dialogVisible = true
            this.dialogTitle='新建日程'
            this.dialogChange = false
            this.$data.ruleForm = this.$options.data().ruleForm
            if (this.$refs.ruleForm !== undefined) this.$refs.ruleForm.resetFields()
        },
        // 提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.ruleForm.selectTime=moment(this.ruleForm.selectTime).format('YYYY-MM-DD HH:mm:ss')
                    let params = {
                        title:this.ruleForm.title,
                        selectTime:this.ruleForm.selectTime,
                        describeInfo:this.ruleForm.describeInfo,
                    }
                    if(!this.dialogChange){
                        addSchedule(params).then(res=>{
                            if(res.code == 200){
                                this.$message({
                                    message: '已为您添加1条日程',
                                    type: 'success'
                                });
                                this.initData()
                                this.dialogVisible = false
                                this.$refs[formName].resetFields()
                            }
                        })
                    }else{
                        params.id=this.ruleForm.id
                        editSchedule(params).then(res=>{
                            if(res.code == 200){
                                this.$message({
                                    message: '已修改日程',
                                    type: 'success'
                                });
                                this.initData()
                                this.dialogVisible = false
                                this.$refs[formName].resetFields()
                            }
                        })
                    }
                    
                } 
            });
        },
        // 查看日程
        changeDay(data){
            this.dialogTitle='日程消息'
            this.dialogVisible=true
            this.dialogChange=true
            this.ruleForm=data
        },
        //删除日程
        scheduleDelet(){
            deleteSchedule({id:this.ruleForm.id}).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.initData()
                    this.dialogVisible = false
                }
            })
        },
        // 更多
        moreDay(data,time){
            this.moreList=data
            this.moreTitle=moment(time).format('YYYY年MM月DD日')+'全部日程消息'
            this.dialogMore=true
        }
    },
}
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang='scss'>
@function pxToRem($val) {
    @return $val/100 + rem;
}
.weatherBox{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: flex;
    .weatherLeft{
        width: pxToRem(360);
        height: 100%;
        background: #FFFFFF;
        .title{
            font-size: pxToRem(28);
            font-weight: bold;
            color: #4E5969;
            line-height: pxToRem(80);
            padding-left: pxToRem(40);
        }
        .calendar{
            padding: pxToRem(20);
            .top{
                margin-bottom:pxToRem(20);
                display: flex;
                justify-content: space-between;
                font-size: pxToRem(20);
                color: #4E5969;
                align-items: center;
                i{
                    color: #A9B0BB;
                }
            }
            .main{
                overflow: hidden;
                margin-bottom: pxToRem(40);
                .weekTop{
                    display: flex;
                    div{
                        flex: 1;
                        text-align: center;
                        line-height: pxToRem(46);
                        font-size:pxToRem(20) ;
                        font-weight: 400;
                        color: #A9B0BB;
                    }
                }
                .weekBody{
                    overflow: hidden;
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        list-style: none;
                        li{
                            width: 14.285%;
                            line-height: pxToRem(46);
                            text-align: center;
                            font-size:pxToRem(16) ;
                            font-weight: 400;
                            color: #4E5969;
                            cursor:pointer;
                            &.other-month{
                                color: #A9B0BB;
                            }
                            &.active{
                                position: relative;
                                color: #4E5969;
                                &::before{
                                    content: '';
                                    position: absolute;
                                    width: pxToRem(30);
                                    height: pxToRem(30);
                                    border-radius: pxToRem(15);
                                    top: 50%;
                                    left: 50%;
                                    z-index: 0;
                                    transform: translate(-50%,-50%);
                                    background: var(--themeColor1);
                                }
                            }
                            &.choise{
                                position: relative; 
                                &::before{
                                    content: '';
                                    position: absolute;
                                    width: pxToRem(30);
                                    height: pxToRem(30);
                                    border-radius: pxToRem(15);
                                    border:pxToRem(2) solid var(--themeColor);
                                    top: 50%;
                                    left: 50%;
                                    z-index: 0;
                                    transform: translate(-50%,-50%);
                                }
                            }
                            span{
                                position: relative;
                                z-index: 10;
                            }
                        }
                    }
                }
            }
        }
        .fold{
            overflow: hidden;
            .name{
                padding:0 pxToRem(40);
                font-size: pxToRem(20);
                font-weight: 400;
                color: #4E5969;
                display: flex;
                justify-content: space-between;
                height: pxToRem(50);
                align-items: center;
                cursor: pointer;
            }
            ul{
                overflow: hidden;
                padding-left: pxToRem(40);
                list-style: none;
                font-size: pxToRem(20);
                font-weight: 400;
                color: #A9B0BB;
                li{
                    border-right:pxToRem(4) solid #FFFFFF;
                    &.active{
                        border-color: var(--themeColor);
                    }
                }
                >>>.el-checkbox__inner{
                    width: pxToRem(20) !important;
                    height: pxToRem(20) !important;
                    border-radius: 50%;
                    background: #A9B0BB;
                    border-color:#A9B0BB;
                }
                >>>.el-checkbox__inner::after{
                    transform: rotate(45deg) scaleY(1);
                    border: pxToRem(2) solid #FFF;
                    border-left: 0;
                    border-top: 0;
                    width: pxToRem(6);
                    height: pxToRem(12);
                    top:0;
                    left:pxToRem(6);
                }
                >>>.el-checkbox__input.is-checked .el-checkbox__inner{
                    background: var(--themeColor);
                    border-color: var(--themeColor);
                }
            }
        }
    }
    .weatherRight{
        margin-left: 10px;
        flex: 1;
        height: 100%;
        .top{
            margin-bottom: 10px;
            height: 88px;
            background: #FFFFFF;
            border-radius: 6px 6px 6px 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 pxToRem(60);
            .change{
                display: flex;
                align-items: center;
                .today{
                    width: pxToRem(80);
                    line-height: pxToRem(36);
                    background: var(--themeColor2);
                    border-radius:3px;
                    border: 1px solid var(--themeColor);
                    font-size: pxToRem(16);
                    font-weight: 400;
                    color: var(--themeColor);
                    cursor: pointer;
                    text-indent: pxToRem(10);
                    margin-right: pxToRem(50);
                }
                >>>.el-button--text{
                    color: #4E5969;
                    font-size: pxToRem(20);
                }
                .year-month{
                    margin-left: pxToRem(20);
                    font-size: pxToRem(20);
                }
            }
            >>>.el-button{
                font-size: pxToRem(14);
                i{
                    margin-left: pxToRem(20);
                }
            }
        }
        .main{
            height: calc(100% - 98px);
            .weekTop{
                height: 98px;
                margin-bottom: 10px;
                background: #FFFFFF;
                border-radius: 6px 6px 0px 0px;
                display: flex;
               div{
                flex: 1;
                line-height: 98px;
                font-size: pxToRem(24);
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #4E5969;
                text-indent: pxToRem(40);
                border-right: pxToRem(2) solid #EBF2F8;
                &:nth-last-child(){
                    border: none;
                }
               }

            }
            .weekBody{
                height: calc(100% - 108px);
                background: #FFFFFF;
                overflow: auto;
                &::-webkit-scrollbar {
                    width: 6px;
                }
                /*滚动槽*/
                &::-webkit-scrollbar-track {
                    border-radius: 10px;
                }
                /* 滚动条滑块 */
                &::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background: rgba(0, 0, 0, 0.2);
                }
                .tBody{
                    width: 100%;
                    list-style: none;
                    display: flex;
                    flex-wrap: wrap;
                    .tList{
                        width: 14.285%;
                        height: pxToRem(146);
                        border-bottom: 2px solid #EBF2F8;
                        border-right: 2px solid #EBF2F8;
                        cursor: pointer;
                        &:nth-child(7),&:nth-child(14),&:nth-child(21),&:nth-child(28),&:nth-child(35),&:nth-child(42){
                            border-right: none;
                        }
                        &:nth-child(36),&:nth-child(37),&:nth-child(38),&:nth-child(39),&:nth-child(40),&:nth-child(41),&:nth-child(42){
                            border-bottom: none;
                        }
                        &.choise{
                            .content{
                                border-color: var(--themeColor) !important;
                            }
                        }
                        &.active{
                            .content{
                                border-color: var(--themeColor2);
                                background: var(--themeColor2);
                            }
                        }
                        &.other-month{
                            .day{
                                .time{
                                    color: #A9B0BB !important;
                                }
                            }
                        }
                        .content{
                            border:pxToRem(2) solid #FFF;
                            width:100%;
                            height: 100%;
                            padding: 0 pxToRem(10);
                            box-sizing: border-box;
                            .day{
                                display: flex;
                                align-items: center;
                                .time{
                                    display: block;
                                    width: pxToRem(50);
                                    height: pxToRem(50);
                                    font-size: pxToRem(20);
                                    font-weight: 400;
                                    color: var(--themeColor);
                                    text-align: center;
                                    line-height: pxToRem(50);
                                }
                                .lunar{
                                    display: block;
                                    width: pxToRem(60);
                                    font-size:pxToRem(16);
                                    font-weight: 400;
                                    color: #A9B0BB;
                                }
                                .forDay{
                                    font-size: pxToRem(16);
                                    &.blue{
                                        color: var(--themeColor);
                                    }
                                    &.red{
                                        color: #FF4848;
                                    }
                                }
                            }
                            .schedule{
                                overflow: hidden;
                                padding-right: pxToRem(10);
                                ul{
                                    overflow: hidden;
                                    list-style: none;
                                    li{
                                        height: pxToRem(30);
                                        line-height: pxToRem(30);
                                        background:rgba(24, 145, 255, 0.2);
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        font-size: pxToRem(12);
                                        color: #666666;
                                        border-left: pxToRem(2) solid #1891FF;
                                        margin-bottom: pxToRem(2);
                                        padding-left: pxToRem(4);
                                        span{
                                            font-size: pxToRem(14);
                                            color: #333333;
                                            margin-right: pxToRem(4);
                                        }
                                    }
                                }
                                .more{
                                    line-height: pxToRem(30);
                                    font-size: pxToRem(14);
                                    color: #666666;
                                }
                            }
                            .weather{
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .time{
                                    display: flex;
                                    justify-content:center;
                                    align-items: center;
                                    color: var(--themeColor);
                                    font-size: pxToRem(16);
                                    font-weight: bold;
                                    width: pxToRem(70);
                                    overflow: hidden;
                                    img{
                                        height: pxToRem(40);
                                        filter: drop-shadow(pxToRem(-80) 0 var(--themeColor));
                                        transform: translate(pxToRem(80));
                                    }
                                    p{
                                        text-align: center;
                                    }
                                }
                                .info{
                                    flex: 1;
                                    overflow: hidden;
                                    font-size: pxToRem(14);
                                    color: #666666;
                                    text-align: right;
                                    .temperature{
                                        display: flex;
                                        align-items: center;
                                        justify-content: right;
                                    }
                                    .on{
                                        font-weight: bold;
                                        color: #478DE9;
                                        margin-right: pxToRem(6);
                                    }
                                    .air{
                                        display: flex;
                                        align-items: center;
                                        img{
                                            height: pxToRem(22);
                                            margin-right: pxToRem(4);
                                        }
                                    }
                                }
                                
                            }
                        }
                    }
                }
            }
        }
    }
}
.blue{
    color: #1891FF;
}
/deep/.pop{
    width: pxToRem(280);
    .name{
        display: flex;
        align-items: center;
        span:nth-child(1){
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            font-size: .2rem;
            font-weight: 400;
            color: #4E5969;
            text-align: center;
            line-height: .5rem;
        }
        span:nth-child(2){
            display: block;
            width: 0.6rem;
            font-size: pxToRem(16);
            font-weight: 400;
            color: #A9B0BB;
        }
    }
    .list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: pxToRem(14);
        color: #666666;
        margin-top: pxToRem(6);
        .left{
            display: flex;
            align-items: center;
        }
        .centigrade{
            width: pxToRem(70);
            display: flex;
            align-items: center;
            white-space: nowrap;
            img{
                height: pxToRem(24);
                margin-right: pxToRem(4);
            }
        }
        span{
            margin-right: pxToRem(10);
        }
        .popImg{
            display: flex;
            align-items: center;
            overflow: hidden;
            img{
                height: pxToRem(30);
                filter: drop-shadow(pxToRem(-40) 0 #5D90FF);
                transform: translate(pxToRem(40));
                margin-left: pxToRem(4);
            }
        }
    }
}
.moreList{
    padding:0 pxToRem(20);
    list-style: none;
    li{
        display: flex;
        align-items: center;
        padding: pxToRem(10);
        align-content: pxToRem(30);
        font-size: pxToRem(16);
        color: #666666;
        margin-bottom: pxToRem(2);
        border-left: pxToRem(2) solid #478DE9;
        background: rgba(24, 145, 255, 0.2);
        line-height: pxToRem(30);
        cursor: pointer;
        .time{
            display: block;
            width: pxToRem(60);
            color: #478DE9;
            white-space: nowrap;
        }
        .text{
            flex: 1;
        }
    }
    
}
</style>
